<template>
	<view style="height: 100vh;" :style="'background: url('+$public.appstc(login_bg)+') no-repeat 100% 100%'">

		<view class="auth">
			<view class="wanl-title"></view>
			<form @submit="formSubmit">
				<view class="avatar">
					<image :src="$public.appstc(logo)" mode="aspectFill"></image>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light" v-if="status == 'login'">
					<input placeholder="请输入手机号码" confirm-type="next" placeholder-class="placeholder" name="nickName"
						v-model="mobile"></input>
				</view>
				

				<view class="auth-group radius-bock bg-gray wlian-grey-light" v-if="status == 'register'">
					<input placeholder="请输入手机号码" confirm-type="next" placeholder-class="placeholder" name="mobile"
						v-model="mobile"></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input type="text" placeholder="请输入登录密码" password="true" confirm-type="done" maxlength="16"
						placeholder-class="placeholder" name="password" v-model="password"></input>
				</view>
				<view class="cu-form-group auth-group  radius-bock  bg-gray wlian-grey-light"
					v-if="status == 'register'">
					<input placeholder="请输入验证码" name="code" v-model="code"></input>
					<button class='cu-btn bg-orange shadow' @tap="send">验证码</button>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light" v-if="status == 'register'">
					<input placeholder="请输入邀请人邀请码,登录时无需输入" confirm-type="next" placeholder-class="placeholder"
						name="inviteCode" v-model="inviteCode"></input>
				</view>

				<view class="auth-group flex flex-row">

					<checkbox-group class="block" @change="CheckboxChange">
						<checkbox :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false"
							value="A"></checkbox>
					</checkbox-group>
					<view @tap="jumpTo('/pages/my/agree')">
						勾选代表同意付加加的<text style="color: #f44c01;">《用户协议》</text>
					</view>
				</view>
				<view class="auth-button flex flex-column">
					<button v-if="status == 'login'" class="cu-btn bg-blue sl radius-bock" @tap="submit">登录</button>
					<button v-else class="cu-btn bg-orange sl radius-bock" formType="submit">注册</button>
				</view>
				<!-- #ifdef H5 -->
				<view class="auth-button flex flex-column">
					<button v-if="status == 'register'" class="cu-btn bg-orange sl radius-bock"
						@tap="download">下载APP</button>
				</view>
				<!-- #endif -->
				<view class="tips">
					<view v-if="status == 'register'" @tap="toChange('login');">去登录</view>
					<view v-else @tap="toChange('register');">去注册</view>
				</view>

			</form>
		</view>

	</view>
</template>
<script>
	import user from '@/api/user.js';
	import graceChecker from '@/common/graceChecker.js';
	export default {
		data() {
			return {
				checkbox: [{
					value: 'A',
					checked: true
				}],
				agreement: false,
				logo: '',
				userInfo: {
					avatarUrl: '',
					nickName: null,
					gender: 0
				},
				platform: 'h5',
				pageroute: '',
				provider: null,
				timer: null,
				third_id: 0,
				canIUseGetUserProfile: false, // 1.0.7 升级
				password: '',
				inviteCode: '',
				mobile: '',
				code: '',
				login_bg: '',
				status: 'register',
				radio: false,
			};
		},
		onLoad(options) {

			if (options.cid) {
				this.inviteCode = options.cid
				this.$store.commit('setInviteCode', options.cid);
			}
		},
		onShow() {

			this.detail();
		},
		methods: {
			send(e) {

				if (!this.mobile) {
					this.toast('请输入手机号')
				}
				// 定义表单规则
				// let rule = [{
				// 		name: 'mobile',
				// 		checkType: 'phoneno',
				// 		checkRule: "1,11",
				// 		errorMsg: '手机号不正确'
				// 	},
				// ];
				// //进行表单检查
				// var formData = e.detail.value;
				// console.log(formData)
				// var checkRes = graceChecker.check(formData, rule);
				// if (checkRes) {

				user.sendsms({
					mobile: this.mobile,
					event: 'register'
				}).then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						console.log(res.data)

					}
					this.toast(res.msg)
				})
				// }
			},
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			detail() {
				this.inviteCode = this.$store.state.inviteCode;
				// 登录账号
				user.detail().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.logo = res.data.logo;
						this.login_bg = res.data.mobile_login_bg;

					}
				})
			},
			submit() {
				// 登录账号
				user.login({
					account: this.mobile,
					password: this.password
				}).then(res => {
					uni.hideLoading();
					if (res.code !== 1) {
						return this.toast(res.msg)
					}
					if (res.code === 1) {
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setToken', res.data.userinfo.token);
						this.$store.commit('setUserInfo', res.data.userinfo);
						// uni.navigateBack();
						uni.switchTab({
							url: '/pages/my/index'
						})
					}
				})
			},
			download() {

				window.location.href = 'https://app.yycjkb.cn/fujiajia.apk'

			},
			formSubmit(e) {
				//定义表单规则
				let rule = [
					// {
					// 	name: 'nickName',
					// 	checkType: 'string',
					// 	checkRule: "1,20",
					// 	errorMsg: '用户名应该1-10字符之间'
					// },
					{
						name: 'password',
						checkType: 'string',
						checkRule: '6,16',
						errorMsg: '密码至少6位'
					},

					{
						name: 'mobile',
						checkType: 'phoneno',
						checkRule: '1,11',
						errorMsg: '手机号不正确'
					},

					{
						name: 'code',
						checkType: 'string',
						checkRule: '1,4',
						errorMsg: '验证码不正确'
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					user.register({
						username: this.mobile,
						password: this.password,
						inviteCode: this.inviteCode,
						mobile: this.mobile,
						code: this.code,
					}).then(res => {
						uni.hideLoading();
						if (res.code !== 1) {
							return this.toast(res.msg)
						}
						if (res.code === 1) {
							this.$store.commit('setHasLogin', true);
							this.$store.commit('setToken', res.data.userinfo.token);
							this.$store.commit('setUserInfo', res.data.userinfo);
							this.$store.commit('removeInviteCode'); // 删除缓存的邀请码

							// uni.navigateBack();

							// uni.navigateBack();
							uni.showModal({
								title: '您已注册成功，添加"付加加"公众号登录或下载APP登录'
							})

							this.$store.dispatch('user/login', res);


							// uni.reLaunch({url: decodeURIComponent(this.pageroute)});
						}
					})


					// this.$api.post({
					// 	url: 'v1/wechat/config/register',
					// 	data: {
					// 		third_id: this.third_id,
					// 		avatarUrl: this.userInfo.avatarUrl,
					// 		nickName: this.mobile,
					// 		gender: this.userInfo.gender,
					// 		password: this.password
					// 	},
					// 	success: res => {
					// 		// 绑定成功自动跳转登录接口
					// 		this.$api.post({
					// 			url: 'auth/login',
					// 			data: {
					// 				username: res.name,
					// 				password: this.password,
					// 				get_user_info: true,
					// 			},
					// 			success: res => {
					// 				this.$store.dispatch('user/login', res);
					// 				uni.reLaunch({url: decodeURIComponent(this.pageroute)});
					// 			}
					// 		});
					// 	}
					// });
				} else {
					return this.toast('请填写用户名')
					// this.$wanlshop.msg('请填写用户名');
				}
			},
			refuseUserInfo() {
				this.$wanlshop.back(1);
			},
			toChange(status) {
				// console.log(status)
				this.status = status;
			},
		}
	};
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
		background: url('https://www.yycjkb.cn/uploads/20241124/a12a2d24953ee07a05a9527b17157ed7.png') no-repeat 50% 20%;
		height: 100vh;
	}

	.wanl-title {
		padding-bottom: 130rpx;
		padding-top: 170rpx;
		font-size: 68rpx;
	}

	.wanl-title .titleInfo {
		font-size: 56rpx;
	}

	.wanl-weixin-btn-info {
		color: #B8B8B8 !important;
	}


	.auth {
		padding: 0 60rpx;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		width: 100%;
	}

	.auth-group {
		padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		min-height: 60rpx;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.auth-group input {
		flex: 1;
		font-size: 33upx;
		color: #250f00;
		padding-right: 20upx;
	}

	.auth-group .placeholder {
		color: #b3b3b3;
	}

	.auth-button {
		padding: 15rpx 0 10rpx 0;
	}

	.auth-button .cu-btn {
		height: 60rpx;
	}

	.text-center {
		color: #3f2f21;
	}

	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
	}


	.shake-horizontal {
		animation-name: shake-horizontal;
		animation-duration: 100ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-play-state: running;
	}

	.auth-clause checkbox {
		margin-right: 6rpx;
		transform: scale(0.7);
	}



	.auth-clause text {
		margin: 0 10rpx;
		color: #ED6D0F;
	}


	.avatar {
		display: flex;
		justify-content: center;
		flex: 1;
		margin-bottom: 80rpx;
	}

	.avatar image {
		border-radius: 9999px;
		overflow: hidden;
		height: 200rpx;
		width: 200rpx;
	}

	.wanl-auth-popup {
		position: fixed;
		right: 60rpx;
		left: 60rpx;
		top: 100rpx;
		bottom: 200rpx;
		padding: 50rpx;
	}

	.wanl-auth-popup .avatar {
		margin-top: 80rpx;
		margin-bottom: 100rpx;
	}

	.wanl-auth-popup .cu-btn {
		height: 90rpx;
		width: 100%;
	}

	.auth-button .cu-btn {
		width: 100%;
	}

	.auth-button .cu-btn-ml {
		margin-left: 20rpx;
	}

	.tips {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin: 10rpx 0 30rpx;
		color: #00aaff;
	}
</style>